<template>
  <div class="bread_wrap">
    <ul>
      <li>
        <a href="/layout">首页</a>
      </li>
      <li v-for="(item, index) in breadList" :key="index">
        <span v-if="index == 1"> {{ item.title }}</span>
        <a v-if="index == 0" :href="'/layout' + item.path">{{ item.title }}</a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    breadList: {
      type: Array,
      default () {
        return []
      }
    }
  }
}
</script>
<style lang="less" scoped>
.bread_wrap {
  width: 80%;
  margin: 20px auto;
  line-height: 50px;
  ul {
    display: flex;
    li {
      padding: 0 10px;
      font-size: 30px;
      &::after {
        content: '/';
        font-size: 30px;
        padding-left: 10px;
      }
      &:last-child::after {
        content: '';
      }
      a {
        font-size: 30px;
        color: black;
        &:hover {
          color: #409eff;
        }
      }
    }
  }
}
</style>
